<template>
  <div>
    <el-drawer
      :title="title"
      :before-close="handleClose"
      :visible.sync="teampListDialog"
      direction="rtl"
      custom-class="add-drawer"
      ref="drawer"
      size="40%"
    >
      <div class="demo-drawer__content">
        <el-form
          :model="teamCardForm"
          ref="teamCardFormRef"
          :rules="teamCardFormRule"
          label-position="top"
        >
          <div class="title">基础信息</div>
          <el-form-item
            label="车队名称"
            :label-width="formLabelWidth"
            prop="fleetName"
          >
            <el-input
              v-model="teamCardForm.fleetName"
              autocomplete="off"
              style="width: 90%"
              :disabled="operation === 'detail'"
            ></el-input>
          </el-form-item>
          <el-form-item label="主卡号" :label-width="formLabelWidth">
            <el-input
              v-model="teamCardForm.cardNumber"
              autocomplete="off"
              placeholder="无需输入，系统自动生成"
              disabled
              style="width: 90%"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="联系人"
            :label-width="formLabelWidth"
            prop="contacts"
          >
            <el-input
              v-model="teamCardForm.contacts"
              autocomplete="off"
              style="width: 90%"
              :disabled="operation === 'detail'"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="联系电话"
            :label-width="formLabelWidth"
            prop="phone"
          >
            <el-input
              v-model="teamCardForm.phone"
              autocomplete="off"
              style="width: 90%"
              placeholder="请输入电话"
              :disabled="operation === 'detail'"
            ></el-input>
          </el-form-item>

          <!-- <div class="title">关联油站</div>
          <el-form-item
            label="油站名称"
            :label-width="formLabelWidth"
            prop="stationId"
          >
            <el-select
              v-model="teamCardForm.stationId"
              placeholder="请选择油站"
              style="width: 90%"
            >
              <el-option
                v-for="item in stationList"
                :label="item.stationName"
                :value="item.stationId"
              ></el-option>
              <el-option label="全部油站" value="0"></el-option>
            </el-select>
          </el-form-item> -->

          <div class="title">核销方式</div>
          <el-form-item>
            <el-radio-group v-model="teamCardForm.useType">
              <el-radio
                :label="1"
                :disabled="operation === 'detail' || operation === 'edit'"
                >司机自动出示核销码</el-radio
              >
              <el-radio
                :label="2"
                :disabled="operation === 'detail' || operation === 'edit'"
                >第三方核销机构</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item
            v-show="this.teamCardForm.useType === 2"
            prop="thirdOrganName"
          >
            <el-input
              v-model="teamCardForm.thirdOrganName"
              placeholder="请输入"
              style="width: 90%"
              :disabled="operation === 'detail'"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="handleClose">取 消</el-button>
          <el-button
            type="primary"
            @click="handleSubmit"
            v-show="operation !== 'detail'"
            >确定</el-button
          >
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {
  getStationListApi,
  addFleetCardApi,
  updateFleetCardApi,
} from "@/api/teamCard/teamCardList";
export default {
  name: "TeamRightDrawer",
  props: {
    teampListDialog: {
      type: Boolean,
      default: false,
    },
    operation: {
      type: String,
      default: "add",
    },
    currentData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    let checkPhone = (rule, value, callback) => {
      let phoneStr = value.trim();
      // 无154和194 ，142和143开头的，其余的都可以。16开头的手机号后面只有2567
      const reg =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
      if (!phoneStr) return callback(new Error("请输入电话号码"));
      if (phoneStr.length !== 11)
        return callback(new Error("手机号码的长度为11位"));
      if (!reg.test(phoneStr)) return callback(new Error("手机不合法"));
      callback();
    };
    return {
      formLabelWidth: "70px",
      stationList: [],
      teamCardForm: {
        fleetName: "", // 车队名称
        cardNumber: null, // 主卡号
        contacts: "", // 联系人
        phone: "",
        stationId: "",
        useType: 1, // 核销方式 1 司机自动出示核销码   2 第三方和核销机构
        thirdOrganName: "", // 第三方核销机构名称
      },
      teamCardFormRule: {
        fleetName: [
          { required: true, message: "请输入车队名称", trigger: "blur" },
        ],
        contacts: [
          { required: true, message: "请输入联系人", trigger: "blur" },
        ],
        phone: [{ required: true, validator: checkPhone, trigger: "blur" }],
        // thirdOrganName: [
        //   {
        //     required: true,
        //     message: "请输入第三方核销机构名称",
        //     trigger: "blur",
        //   },
        // ],
        // stationId: [
        //   { required: true, message: "请选择油站", trigger: "change" },
        // ],
      },
    };
  },

  computed: {
    title() {
      const types = {
        add: "新增",
        edit: "编辑",
        detail: "查看",
      };
      return types[this.operation];
    },
  },
  watch: {
    teampListDialog: {
      handler(val) {
        if (val) {
          this.getStationList();
        }
      },
      immediate: true,
      deep: true,
    },
    currentData(val) {
      this.teamCardForm = val;
      // Object.assign(this.teamCardForm, val);
    },
  },
  methods: {
    // 获取油站
    getStationList() {
      if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
        getStationListApi({
          enterpriseId: this.presentEnterprise.enterpriseId,
        }).then((res) => {
          this.stationList = res.rows;
        });
      }
    },
    // 关闭右侧弹框
    handleClose() {
      this.resetForm("teamCardFormRef");
      this.$emit("update:teampListDialog", false);
    },
    // 确定提交
    handleSubmit() {
      this.$refs.teamCardFormRef.validate((valid) => {
        if (valid) {
          // 处理一下thirdOrganName 为null的情况
          if (this.teamCardForm.thirdOrganName === null) {
            this.teamCardForm.thirdOrganName = "";
          } else {
            this.teamCardForm.thirdOrganName = String(
              this.teamCardForm.thirdOrganName
            ).trim();
          }

          if (this.operation === "add") {
            addFleetCardApi(this.teamCardForm).then((res) => {
              this.msgSuccess("添加车队卡成功");
              this.handleClose();
              this.$emit("reloadData");
            });
          }
          if (this.operation === "edit") {
            updateFleetCardApi(this.teamCardForm.id, this.teamCardForm).then(
              (res) => {
                this.msgSuccess("编辑车队卡成功");
                this.handleClose();
                this.$emit("reloadData");
              }
            );
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  font-size: 18px;
  margin-bottom: 20px;
}
::v-deep .add-drawer {
  overflow-y: auto;
}

::v-deep .el-drawer {
  .el-drawer__header {
    padding: 20px;
    border-bottom: 1px solid #ddd;
    font-size: 20px;
    margin-bottom: 0px;
  }
  .el-drawer__body {
    padding: 20px;
  }
  .demo-drawer__footer {
    text-align: right;
  }
}
</style>
